<template>
	<view style="background-color: #eee">
		<view class="container">
			<view class="head rel" style="height: 200px">
				<swiper autoplay="auto" :circular="true" class="swiper" duration="500" :indicatorActiveColor="color"
					indicatorColor="#ccc" :indicatorDots="false" interval="5000" style="height: 300px">
					<swiper-item v-for="(item, index) in goods_info.img" :key="index">
						<image class="slide-image" mode="aspectFill" :src="url + item"></image>
					</swiper-item>
				</swiper>
				<view class="Collage ab pa">
					<view class="dis_in color_f pa fon_24">
						<view class="collMan">
							<view class="price"><text>￥</text> {{ goods_info.pt_price }}</view>
							<text class="dis_in">{{ goods_info.people }}人团</text>
						</view>
					</view>
					<view class="dis_in fon_24 color_f coTime" style="float: right">
						<view class="t_c">距离拼购结束还剩</view>
						<view class="" v-if="clock != false">
							<text>{{ day }}</text>
							<text class="unit">天</text>
							<text>{{ hour }}</text>
							<text class="unit">:</text>
							<text>{{ min }}</text>
							<text class="unit">:</text>
							<text>{{ sec }}</text>
						</view>
						<view class="" v-if="clock == false">
							<text>00</text>
							<text class="unit">天</text>
							<text>00</text>
							<text class="unit">:</text>
							<text>00</text>
							<text class="unit">:</text>
							<text>00</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shop ba_f pa_0">
				<view class="dis_in">
					<view class="pa_1 gobyndsingle fon_36 name">
						{{ goods_info.name }}
					</view>
					<view class="fon_24 pa_1 desc">
						{{ goods_info.introduction }}
					</view>
				</view>
				<view @tap="shareFun" class="dis_in t_c fon_24 shop-share">
					<image mode="aspectFill" src="/static/ymq_canyino2o/fx.png"></image>
					<text>分享</text>
				</view>
			</view>
			<view class="pa_1 ba_f fon_24 mar_t time">
				<div class="name">活动时间</div>
				<view class="time-wrapper">
					<view class="time-item pa bor_bottom" >
						<text>活动起止时间：</text>
						 <!-- + color -->
						<text :style="'color:#FD6057'">{{ goods_info.start_time }}至{{ goods_info.end_time }}</text>
					</view>
					<view class="pa time-item">
						<text>消费结束时间：</text>
						<text :style="'color:#FD6057'">{{ goods_info.xf_time }}</text>
					</view>
				</view>
			</view>
			<view class="collInfo mar_t ba_f">
				<view class="title">
					可直接参与以下拼团
				</view>
				<view class="group pa bor_bottom" v-for="(item, index) in group" :key="index">
					<view class="dis_in name">
						<image class="dis_in" mode="aspectFill" :src="item.img"></image>
						<text class="dis_in fon_30 mar_l">{{ item.name }}的团</text>
					</view>

					<view class="dis_in t_r">
						<view class="fon_24">
							<text>还差</text>
							<text :style="'color:#FD6359'">{{ item.num }}人</text>
							<text>成团</text>
						</view>
						<view class="fon_24 color_c" v-if="clock != false">剩余{{ day }}天{{ hour }}:{{ min }}:{{ sec }}</view>
						<view class="fon_24 color_c" v-else>活动已结束</view>
					</view>

					<view @tap="collageInfo" class="dis_in color_f fon_28 parGroup t_c btn" :data-id="item.id" :data-logo="item.img"
						:data-name="item.name" :data-num="item.num" :data-userid="item.user_id" v-if="clock != false">
						<text>去参团</text>
					</view>

					<view class="dis_in color_f fon_28 parGroup t_c btn" v-else>
						<text>已结束</text>
					</view>
				</view>
			</view>
			
			<view class="ba_f mar_t pa_1 shop-wrapper">
				<view class="address rel pa_0 bor_bottom">
					<view class="dis_in fon_28 left">
						<view class="color_6 name">
							{{ StoreInfo.store.name }}
						</view>
						<view class="color_9" style="margin-top: 30rpx;">
							营业时间：{{ StoreInfo.store.time }}-{{ StoreInfo.store.time2 }}
							<text style="margin-left: 20rpx">{{ StoreInfo.store.time3 }}-{{ StoreInfo.store.time4 }}</text>
						</view>
						<view class="color_9">
							<text>{{ StoreInfo.store.address }}</text>
						</view>
					</view>
					<view class="right">
						<view class="item" @tap="maketel">
							<image src="/static/ymq_canyino2o/bd.png" mode=""></image>
							<text>拨打</text>
						</view>
						<view class="item dh" @tap="location">
							<image src="/static/ymq_canyino2o/dh.png" mode=""></image>
							<text>导航</text>
						</view>
					</view>
					<!-- <image @tap="maketel" class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image> -->
				</view>
				<!-- <view @tap="location" class="address rel pa_0">
					<image class="dis_in" mode="aspectFit"
						src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"
						style="width: 40rpx; height: 40rpx; margin: 0rpx 15rpx"></image>
					<view class="dis_in fon_28">
						<view class="color_6">
							{{ StoreInfo.store.address }}
						</view>
					</view>
					<image class="dis_in ab ud se_right" mode="aspectFit"
						src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"></image>
				</view> -->
			</view>
			<view class="playMethod pa_1 ba_f mar_t">
				<view class="pa_0 fon_30 bor_bottom">拼购玩法</view>
				<view class="fon_24 pa_0 rule">
					<view class="dis_in">
						<image class="dis_in" mode="aspectFill" src="./static/collage/num_one.png"
							style="width: 30rpx; height: 30rpx; margin-right: 5rpx"></image>
						<text class="dis_in">开团/参团</text>
					</view>
					<view class="dis_in t_c">></view>
					<view class="dis_in">
						<image class="dis_in" mode="aspectFill" src="./static/collage/num_two.png"
							style="width: 30rpx; height: 30rpx; margin-right: 5rpx"></image>
						<text class="dis_in">邀请好友</text>
					</view>
					<view class="dis_in t_c">></view>
					<view class="dis_in t_c" style="display: flex">
						<view class="dis_in" style="display: flex; align-items: center">
							<image class="dis_in" mode="aspectFill" src="./static/collage/num_three.png"
								style="width: 30rpx; height: 30rpx; margin-right: 5rpx"></image>
						</view>
						<view class="dis_in">
							<view>满员发货</view>
							<view class="color_9">(不满自动退款)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shopInfo mar_t ba_f pa" v-if="goods_info.details != ''">
				<view class="title">
					商品详情
				</view>
				<rich-text :nodes="goods_info.details"></rich-text>
			</view>
			<view class="share" v-if="!share">
				<view class="ab"></view>
				<view class="ab">
					<view class="share_info">
						<view class="dis_in rel">
							<view class="rel">
								<image class="ab udlr" mode="aspectFill" src="./static/collage/weixin.png"></image>
							</view>
							<view class="t_c fon_24">分享给朋友</view>
							<button class="ab" openType="share"></button>
						</view>
						<view @tap="canvas" class="dis_in">
							<view class="rel">
								<image class="ab udlr" mode="aspectFill" src="./static/collage/schb.png"></image>
							</view>
							<view class="t_c fon_24">生成商品海报</view>
						</view>
					</view>
					<view @tap="close" class="pa_0 t_c fon_28 ba_f">关闭</view>
				</view>
			</view>
			<view class="generateImage" v-if="!friendsImage">
				<view class="ab"></view>
				<view class="ab udlr">
					<view style="overflow: hidden">
						<image mode="aspectFill" :src="genImage"></image>
					</view>
					<button @tap="toTemp" class="fon_30">保存图片</button>
					<view class="color_e fon_24 t_c pa">保存至相册可以分享至朋友圈</view>
					<view @tap="close" class="ab t_c">×</view>
				</view>
			</view>
			<view style="height: 170rpx"></view>
			<view class="buyShop ba_f">
				<!-- <view @tap="back" class="dis_in t_C fon_24 t_c"
					style="display: flex; align-items: center; justify-content: center">
					<image mode="widthFix" src="./static/collage/return.png"></image>
				</view> -->
				<view @tap="alone_pay" class="dis_in color_f">
					<view class="t_c">
						<text class="fon_24">￥</text>
						<text class="fon_30">{{ goods_info.dd_price }}</text>
					</view>
					<view class="fon_30 t_c">单独购买</view>
				</view>
				<view @tap="group_pay" class="dis_in color_f" >
					<view class="t_c">
						<text class="fon_24">￥</text>
						<text class="fon_30">{{ goods_info.pt_price }}</text>
					</view>
					<view class="fon_30 t_c">{{ goods_info.people }}人成团</view>
				</view>
			</view>
		</view>
		<canvas canvasId="firstCanvas" style="width: 100%; height: 100%; top: -10000rpx"></canvas>
		<canvas canvasId="ctx" style="width: 100%; height: 100%; top: -12000rpx"></canvas>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
	import gettel from '@/ymq_canyino2o/dist/gettel/index'
	var app = getApp()

	var siteinfo = require('../../../siteinfo.js');

	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				share: true,
				friendsImage: true,
				clock: true,
				store_id: '',
				store_logo: '',
				id: '',
				width: '',
				height: '',
				v_wid: '',
				userInfo: '',

				StoreInfo: {
					store: {
						logo: '',
						name: '',
						time3: '',
						time4: '',
						address: ''
					}
				},

				logo: '',
				logo1: '',
				title: '',
				row: '',
				already_group: false,
				already: '',

				goods_info: {
					img: [],
					people: '',
					pt_price: '',
					y_price: '',
					name: '',
					introduction: '',
					start_time: '',
					end_time: '',
					xf_time: '',
					details: '',
					dd_price: ''
				},

				group: '',
				goods_code: '',
				shop_logo: '',
				nav_array: '',
				url: '',
				logos: '',
				genImage: '',
				day: '',
				hour: '',
				min: '',
				sec: '',
				color: ''
			}
		},
		onLoad: function(t) {
			var that = this
			console.log(t)
			app.globalData.setNavigationBarColor(this)
			uni.setNavigationBarTitle({
				title: t.title
			})
			that.setData({
				store_id: t.store_id,
				store_logo: t.store_logo
			})
			var o = decodeURIComponent(t.scene)
			if (null == t.scene) {
				that.setData({
					id: t.id
				})
			} else {
				that.setData({
					id: o
				})
			}
			that.reload()
			uni.getSystemInfo({
				success: function(t) {
					that.setData({
						width: t.windowWidth,
						height: t.windowHeight,
						v_wid: t.windowWidth - 40
					})
				}
			})
			uni.setNavigationBarColor({
				backgroundColor: '#ff5d06'
			})
		},
		onReady: function() {},
		onShow: function() {
			var that = this
			app.globalData.getUserInfo(function(t) {
				if ('' == t.img || '' == t.name) {
					uni.navigateTo({
						url: '/ymq_canyino2o/pages/my/userinfo' // ../smdc/getdl
					})
				} else {
					that.setData({
						userInfo: t
					})
					that.refresh()
				}
			})
		},
		onHide: function() {},
		onUnload: function() {
			this.setData({
				clock: false
			})
		},
		onPullDownRefresh: function() {},
		onReachBottom: function() {},
		onShareAppMessage: function(t) {
			this.setData({
				share: true
			})
			return {
				title: uni.getStorageSync('users').name + '邀请您一起来拼团',
				path: '/ymq_canyino2o/pages/collage/index?store_id=' +
					this.store_id +
					'&id=' +
					this.id,
				success: function(t) {
					console.log(t)
				},
				complete: function(t) {
					console.log('执行')
				}
			}
		},
		onShareTimeline: function(t) {
			this.setData({
				share: true
			})
			return {
				title: uni.getStorageSync('users').name + '邀请您一起来拼团',
				path: '/ymq_canyino2o/pages/collage/index?store_id=' +
					this.store_id +
					'&id=' +
					this.id,
				success: function(t) {
					console.log(t)
				},
				complete: function(t) {
					console.log('执行')
				}
			}
		},
		methods: {
			maketel: function(t) {
				var e = this.StoreInfo.store.tel
				uni.makePhoneCall({
					phoneNumber: e
				})
			},

			location: function() {
				var t = this.StoreInfo.store.coordinates.split(',')
				var e = this.StoreInfo.store
				console.log(t)
				uni.openLocation({
					latitude: parseFloat(t[0]),
					longitude: parseFloat(t[1]),
					address: e.address,
					name: e.name
				})
			},

			back: function() {
				uni.navigateBack({})
			},

			refresh: function(t) {
				var that = this
				var c = that
				var e = siteinfo.siteroot.slice(0, siteinfo.siteroot.length - 14)
				console.log(e)
				app.globalData.util.request({
					url: 'entry/wxapp/GoodsInfo',
					cachetime: '0',
					data: {
						goods_id: that.id
					},
					success: function(t) {
						for (var e in (console.log('商品详情', t),
								app.globalData.util.request({
									url: 'entry/wxapp/StoreInfo',
									cachetime: '0',
									data: {
										store_id: t.data.goods.store_id
									},
									success: function(t) {
										console.log('商家详情', t)
										that.setData({
											StoreInfo: t.data
										})
									}
								}),
								t.data.group)) {
							t.data.group[e].num =
								Number(t.data.group[e].kt_num) - Number(t.data.group[e].yg_num)
						}
						console.log(t.data.group)
						var o = t.data.goods
						that.countdown(o.end_time)
						o.img = o.img.split(',')
						o.end_times = o.end_time
						o.xf_times = o.xf_time
						o.start_time = that.ormatDate(o.start_time)
						o.end_time = that.ormatDate(o.end_time)
						o.xf_time = that.ormatDate(o.xf_time)
						for (
							var a = c.width - 110, i = o.name, n = [], s = 0, l = i.length; s < l; s += a / 14
						) {
							n.push(i.slice(s, s + a / 14))
						}
						for (var r in (console.log(o.store_logo),
								uni.downloadFile({
									url: o.store_logo,
									success: function(t) {
										console.log(t.tempFilePath)
										that.setData({
											logo: t.tempFilePath
										})
										that.img0()
									}
								}),
								0 != n.length &&
								(console.log('正在下载图片'),
									uni.downloadFile({
										url: that.url + o.img[0],
										success: function(t) {
											console.log(t.tempFilePath)
											that.setData({
												logo1: t.tempFilePath,
												title: i,
												row: n
											})
										}
									})),
								t.data.group)) {
							if (
								null != t.data.group[r].name &&
								4 <= t.data.group[r].name.length
							) {
								t.data.group[r].name = t.data.group[r].name.slice(0, 4) + '...'
							}
							if (t.data.group[r].user_id == uni.getStorageSync('users').id) {
								console.log('已经有开的团了')
								that.setData({
									already_group: true,
									already: t.data.group[r]
								})
							}
						}
						that.setData({
							goods_info: o,
							group: t.data.group
						})
					}
				})
			},

			img0: function(t) {
				var that = this
				var a = siteinfo.siteroot.slice(0, siteinfo.siteroot.length - 14)
				app.globalData.util.request({
					url: 'entry/wxapp/GoodsCode',
					cachetime: '0',
					data: {
						goods_id: that.id
					},
					success: function(t) {
						var e = t.data
						that.setData({
							goods_code: e
						})
						console.log('下载的网址链接', a + e)
						uni.downloadFile({
							url: a + e + '',
							success: function(t) {
								console.log(t.tempFilePath)
								that.setData({
									shop_logo: t.tempFilePath
								})
								that.ctx()
							}
						})
					}
				})
			},

			reload: function(t) {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				that.id
				app.globalData.util.request({
					url: 'entry/wxapp/GroupType',
					cachetime: '0',
					success: function(t) {
						console.log('分类列表', t)
						that.setData({
							nav_array: t.data
						})
					}
				})
				app.globalData.util.request({
					url: 'entry/wxapp/Url',
					cachetime: '0',
					success: function(t) {
						uni.setStorageSync('imglink', t.data)
						that.setData({
							url: t.data
						})
					}
				})
			},

			ctx: function(t) {
				var that = this
				var o = that
				var a = (o.width, o.height, uni.createCanvasContext('ctx'))
				a.drawImage(o.shop_logo, 0, 0, 150, 150)
				a.save()
				a.beginPath()
				a.arc(75, 75, 35, 0, 2 * Math.PI)
				a.clip()
				a.drawImage(o.logo, 35, 35, 75, 75)
				a.restore()
				a.draw()
				setTimeout(function(t) {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 150,
						height: 150,
						canvasId: 'ctx',
						success: function(t) {
							console.log(t.tempFilePath)
							uni.hideLoading()
							that.setData({
								logos: t.tempFilePath
							})
						}
					})
				}, 500)
			},

			canvas: function(t) {
				uni.showLoading({
					title: '正在生成海报'
				})
				var that = this
				var o = that
				var a = o.width
				var i = o.height
				var n = a - 20
				var s = a
				console.log(n)
				console.log(s)
				var l = o.row
				console.log('这是生成的标题数组')
				console.log(l)
				uni.getStorageSync('users').name
				console.log(o)
				var r = uni.createCanvasContext('firstCanvas')
				r.rect(0, 0, a, i)
				r.setFillStyle('#fff')
				r.fill()
				r.fillStyle = 'red'
				r.setFontSize(16)
				r.fillText(uni.getStorageSync('users').name, 10, 30)
				r.fillStyle = '#222'
				r.setFontSize(16)
				r.fillText('邀请你一起来拼团', 78, 30)
				r.drawImage(o.logo1, 10, 50, n, s)
				r.drawImage(o.logos, a - 100, n + 100, 80, 80)
				r.fillStyle = '#333'
				r.setFontSize(12)
				for (var d = 0; d < l.length; d++) {
					console.log(l[d])
					if (d <= 1) {
						r.fillText(l[d], 10, s + 80 + 20 * d)
					}
				}
				r.fillStyle = 'red'
				r.setFontSize(16)
				r.fillText('￥', 10, s + 140)
				r.fillStyle = 'red'
				r.setFontSize(22)
				r.fillText(that.goods_info.pt_price, 30, s + 140)
				r.fillStyle = '#ccc'
				r.setFontSize(14)
				r.fillText('长按识别小程序码访问', 10, s + 160)
				r.draw()
				setTimeout(function() {
					that.genImageFun()
					that.close()
				}, 1000)
			},

			genImageFun: function(t) {
				var that = this
				var o = this.width
				var a = this.canvas_height
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: o,
					height: a,
					canvasId: 'firstCanvas',
					success: function(t) {
						console.log(t.tempFilePath)
						uni.hideLoading()
						that.setData({
							genImage: t.tempFilePath,
							friendsImage: false
						})
					}
				})
			},

			close: function(t) {
				this.setData({
					friendsImage: true,
					share: true
				})
			},

			toTemp: function(t) {
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.genImage,
					success: function(t) {
						console.log(t)
						uni.showToast({
							title: '保存成功'
						})
						that.setData({
							friendsImage: true,
							share: true
						})
					},
					fail: function(t) {},
					complete: function(t) {}
				})
			},

			shareFun: function(t) {
				var e = this.share
				e = 1 != e
				this.setData({
					share: e
				})
			},

			collageInfo: function(t) {
				var e = this
				console.log(e.goods_info)
				console.log(t)
				var o = t.currentTarget.dataset
				var a = e.goods_info
				uni.navigateTo({
					url: 'collageInfo?id=' +
						o.id +
						'&user_id=' +
						o.userid +
						'&goods_id=' +
						a.id
				})
			},

			alone_pay: function(t) {
				var e = this
				uni.navigateTo({
					url: 'qgform?store_id=' +
						e.goods_info.store_id +
						'&goods_id=' +
						e.goods_info.id +
						'&type=1&group_id=&end_time=' +
						e.goods_info.end_times +
						'&xf_time=' +
						e.goods_info.xf_times
				})
			},

			group_pay: function(t) {
				var e = this
				if (1 == e.already_group) {
					uni.showModal({
						title: '温馨提示',
						content: '您已经开过团了，是否跳转至我发起的拼团',
						success: function(t) {
							if (t.confirm) {
								uni.navigateTo({
									url: 'collageInfo?id=' +
										e.already.id +
										'&user_id=' +
										uni.getStorageSync('users').id +
										'&goods_id=' +
										e.goods_info.id
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: 'qgform?store_id=' +
							e.goods_info.store_id +
							'&goods_id=' +
							e.goods_info.id +
							'&type=2&kt_num=' +
							e.goods_info.people +
							'&group_id=&end_time=' +
							e.goods_info.end_times +
							'&xf_time=' +
							e.goods_info.xf_times
					})
				}
			},

			countdown: function(t) {
				var that = this
				var o = (t || []) - Math.round(new Date().getTime() / 1000) || []
				if (o <= 0) {
					app.globalData.util.request({
						url: 'entry/wxapp/UpdateGroup',
						data: {
							store_id: that.store_id
						},
						success: function(t) {
							console.log(t)
						}
					})
					that.setData({
						clock: false
					})
				} else {
					if (0 < o && 0 != that.clock) {
						that.dateformat(o)
						setTimeout(function() {
							o -= 1000
							that.countdown(t)
						}, 1000)
					}
				}
			},

			dateformat: function(t) {
				var e = Math.floor(t)
				var o = Math.floor(e / 3600 / 24)
				var a = Math.floor((e / 3600) % 24)
				var i = Math.floor((e / 60) % 60)
				var n = Math.floor(e % 60)
				if (o < 10) {
					o = '0' + o
				}
				if (a < 10) {
					a = '0' + a
				}
				if (n < 10) {
					n = '0' + n
				}
				if (i < 10) {
					i = '0' + i
				}
				this.setData({
					day: o,
					hour: a,
					min: i,
					sec: n
				})
			},

			ormatDate: function(t) {
				var e = new Date(1000 * t)
				return (
					e.getFullYear() +
					'-' +
					o(e.getMonth() + 1, 2) +
					'-' +
					o(e.getDate(), 2) +
					' ' +
					o(e.getHours(), 2) +
					':' +
					o(e.getMinutes(), 2) +
					':' +
					o(e.getSeconds(), 2)
				)

				function o(t, e) {
					for (var o = '' + t, a = o.length, i = '', n = e; n-- > a;) {
						i += '0'
					}
					return i + o
				}
			}
		}
	}
</script>
<style scoped>
	@import './index.css';
</style>